<!DOCTYPE HTML>
<html>
  <body>
	<div  align="center">
	    <div ><h3>服务器监控</h3></div>
	    <div id="msg" style="background-color: #eee;padding: 10px;width: 500px"></div>
	    <div id="data"></div>
	</div>
  </body><script type="text/javascript">
      var websocket = null;       
      //判断当前浏览器是否支持WebSocket
      if('WebSocket' in window){
          websocket = new WebSocket("ws://localhost:8088/ws/monitor");
      }
      else{
          alert('Not support websocket');
      }      
      //连接发生错误的回调方法
      websocket.onerror = function(){
          showMsg("发生异常...");

      };      
      //连接成功建立的回调方法
      websocket.onopen = function(event){
          showMsg("已连接到监控服务端");
      };      
      //接收到消息的回调方法
      websocket.onmessage = function(){
          showServerData(event.data);
      };       
      //连接关闭的回调方法
      websocket.onclose = function(){
          showMsg("服务端关闭");
      };       
      //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接
      window.onbeforeunload = function(){
          websocket.close();
      };    
      //显示消息
      function showServerData(data){
          document.getElementById('data').innerHTML = data;
      }
	 //显示连接状态
      function showMsg(html){
			console.log(html)
          document.getElementById('msg').innerHTML = "消息："+html;
      }     
  </script>
</html>
